<template>
  <div>
    <tops>砍价列表</tops>
    <div class="bargain-shop" v-for="item in list" :key="item.id">
      <img :src="item.pic" alt="" />
      <div class="right">
        <p>重返校园 男士连帽牛仔外套</p>
        <span>复古校园感，青春活力</span>
        <ul>
          <li>
            <span> <b>￥0.9</b> </span>
            <span class="one">低价</span>
          </li>
          <li>
            <span>￥1</span>
            <span>原价</span>
          </li>
          <li>
            <span>200件</span>
            <span>限量</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import tops from "@/components/Top";
export default {
  components: {
    tops,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$http(
      "https://api.it120.cc/small4/shop/goods/kanjia/list",
      "get"
    ).then((res) => {
      console.log(res);
      this.list = res.data.data.goodsMap;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.bargain-shop {
  font-size: 0.28rem; //14px
  box-sizing: border-box;
  width: 100%;
  height: 2.6rem; //130px
  border-top: 0.01rem solid #e9e9e9;
  padding: 0.2rem;
  img {
    height: 2.27rem;
    width: 2.27rem; //113.94
    float: left;
    border-radius: 5%;
    margin-right: 0.2rem;
  }
  .right {
    p {
      margin-bottom: 0.2rem;
    }
    span {
      font-size: 0.22rem;
      color: #ccc;
    }
    ul {
      width: 50%;
      display: flex;
      font-size: 0.25rem;
      justify-content: space-between;
      color: #ccc;
      margin-top: 0.7rem;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        b {
          color: #d00000;
        }
        .one {
          color: #000;
        }
      }
    }
  }
}

</style>
